<template>
  <!-- 知识管理-图谱管理页面 -->
  <div class="server-main">
    <el-form :inline="true"
      v-model="metaData"
      class="search-form">
      <el-form-item label="图谱名称"
        class="form-input">
        <el-input v-model="metaData.searchVal"
          placeholder="请输入内容"
          clearable></el-input>
      </el-form-item>
      <el-form-item label="状态"
        class="status">
        <el-select v-model="metaData.status"
          class="search-select">
          <el-option label="全部"
            value="2"></el-option>
          <el-option label="启用"
            value="0"></el-option>
          <el-option label="禁用"
            value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
          @click="searchMap"
          style="width: 60px; height: 32px; padding: 0">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="server-table">
      <div class="table-title">
        <span class="table-title-text">图谱管理</span>
        <div>
          <el-button type="primary"
            size="small"
            @click="doloadTemplate">
            <!-- 
            <a
              :href="`${$api.knowledgeMap.getEntityFileTempFile}`"
              style="color: white"
              > -->
            下载模板
            <!-- </a> -->
          </el-button>
          <el-button type="primary"
            size="small"
            @click="openDia">创建图谱</el-button>
        </div>
      </div>
      <el-table :data="tableList"
        class="map-manage"
        v-loading="loading"
        :header-cell-style="{ background: '#F3F4F8', color: '#000000' }"
        :cell-style="{ color: '#333333' }">
        <el-table-column type="index"
          prop="id"
          label="ID"
          width="50"
          align="center"></el-table-column>
        <el-table-column prop="projectName"
          label="图谱名称"
          align="center"
          show-overflow-tooltip></el-table-column>
        <el-table-column prop="projectDescription"
          label="图谱描述"
          align="right"
          show-overflow-tooltip></el-table-column>
        <el-table-column prop="ontologyAllName"
          label="本体名称"
          width="155"
          align="right"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="entityNum"
          label="实体数量"
          width="80"
          align="right"></el-table-column>
        <el-table-column prop="relationNum"
          label="关系数量"
          width="80"
          align="right"></el-table-column>
        <!-- 暂不展示 -->
        <!-- <el-table-column
          prop="secondType"
          label="创建人"
          width="100"
          align="right"
        ></el-table-column> -->
        <el-table-column prop="createTime"
          label="创建时间"
          width="180"
          align="right"></el-table-column>
        <!-- 暂不展示 -->
        <!-- <el-table-column
          prop="eventAbstract"
          label="更新人"
          width="150"
          align="right"
        ></el-table-column> -->
        <el-table-column prop="updateTime"
          label="更新时间"
          width="180"
          align="center"></el-table-column>
        <el-table-column prop="status"
          label="状态"
          width="70"
          align="center">
          <template slot-scope="scope">
            <i class="little-circle-blue"
              v-if="scope.row.projectState == '0'"></i>
            <i class="little-circle-red"
              v-else></i>
            <span>{{ scope.row.projectState == "0" ? "启用" : "禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
          width="340"
          fixed="right"
          align="center"
          class="operation">
          <template slot-scope="scope">
            <el-link class="handle-button"
              :underline="false"
              type="primary"
              @click.native.prevent="goDetail('edit', scope.row)">编辑</el-link>
            <el-link :underline="false"
              class="handle-button"
              style="
                padding: 0 10px;
                border-left: 1px solid #ddd;
                border-right: 1px solid #ddd;
              "
              type="primary"
              @click.native.prevent="goDetail('manage', scope.row)">知识管理</el-link>
            <el-link :underline="false"
              class="handle-button"
              style="padding: 0 10px 0 0; border-right: 1px solid #ddd"
              type="primary"
              @click.native.prevent="changeStatus(scope.row)">
              {{ scope.row.projectState == "0" ? "禁用" : "启用" }}
            </el-link>
            <el-link :underline="false"
              class="handle-button"
              style="padding: 0 10px 0 0; border-right: 1px solid #ddd"
              type="primary"
              @click.native.prevent="uploadFile(scope.row)">导入
            </el-link>
            <el-link :underline="false"
              class="handle-button"
              style="padding: 0 10px 0 0; border-right: 1px solid #ddd"
              type="primary"
              @click.native.prevent="downModel(scope.row)">导出
            </el-link>
            <el-link :underline="false"
              type="primary"
              class="ontology-edit"
              @click.native.prevent="handleDelect(scope.row)">删除</el-link>
          </template>
        </el-table-column>
        <!-- <template slot="append" class="table-pagination">
        </template> -->
      </el-table>
      <div class="pagination">
        <el-pagination class="table-pagination"
          background
          :small="true"
          layout="total, prev, pager, next,sizes, jumper"
          :total="total"
          :hide-on-single-page="!total"
          :page-size="metaData.pageSize"
          :pager-count="5"
          :page-sizes="[10, 20, 30]"
          :current-page="metaData.page"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      width="560px"
      class="map-dialog common-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :before-close="handleClose">
      <el-form ref="form"
        :model="mapForm"
        label-width="120px"
        label-suffix=":">
        <el-form-item label="图谱名称"
          :rules="{
            required: true,
            message: '请输入图谱名称',
            trigger: ['change', 'blur'],
          }"
          prop="name">
          <el-input v-model="mapForm.name"></el-input>
        </el-form-item>
        <el-form-item label="图谱描述"
          :rules="{
            required: true,
            message: '请输入图谱描述',
            trigger: ['change', 'blur'],
          }"
          prop="descri">
          <el-input v-model="mapForm.descri"></el-input>
        </el-form-item>
        <el-form-item label="选择本体模型"
          :rules="{
            required: true,
            message: '请选择本体模型',
            trigger: ['change', 'blur'],
          }"
          prop="reality">
          <el-select v-model="mapForm.reality"
            class="form-select"
            :disabled="isSelectOrigin">
            <el-option v-for="(item, index) in entity"
              :label="item.ontologyAllName"
              :value="item.ontologyAllId"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <div class="form-link">
            <span>还没有可用的本体?</span>
            <el-link type="primary"
              :underline="false"
              @click="goOntology">点击这里</el-link>
            <span>去构建本体建模</span>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary"
          @click="save">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="导入图谱"
      width="30%"
      :visible.sync="uploadDialog"
      @close="afterDialogClose">
      <el-form :model="fileForm"
        :rules="uploadRules"
        ref="uploadForm"
        label-width="120px">
        <el-form-item label="图谱名称:">
          <el-input v-model="fileForm.name"
            readonly></el-input>
        </el-form-item>
        <el-form-item label="选择文件:"
          prop="fileName">
          <div class="file_div">
            <el-input v-model="fileForm.fileName"
              class="input"
              readonly>
              <!-- <template slot="append">
                <el-upload class="upload-demo" accept=".xls,.xlsx,.csv" :before-upload="beforeUpload"
                :show-file-list="false">
                <el-button type="primary">选择文件</el-button>
              </el-upload>
              </template> -->
            </el-input>
            <!-- <el-upload
              class="upload-demo"
              action=""
              accept=".xls,.xlsx,.csv,.json,.rdf,.owl"
              :before-upload="beforeUpload"
              :show-file-list="false"
            > -->
            <el-button type="primary"
              @click="handleSelectFile">选择文件</el-button>
            <input ref="sourceFileRef"
              type="file"
              @input="readySelectFile"
              accept=".zip"
              style="display: none" />

            <!-- </el-upload> -->
          </div>
        </el-form-item>
        <el-form-item>
          <!-- <div class="el-upload__text">请先<el-link type="primary" :underline="false" @click="loadFileTemplate">下载模板
            </el-link>
            ，并按照模板格式组织数据，仅支持格式为.xls、.xlsx、.csv的文件。
          </div> -->
          <div class="el-upload__text">
            请先<el-link type="primary"
              :underline="false"
              @click="doloadTemplate">下载模板
            </el-link>
            ，并按照模板格式组织数据。
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button @click="uploadDialog = false">取 消</el-button>
        <el-button type="primary"
          @click="uploadFun">导 入</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导出"
      :visible.sync="downFormVisible"
      @close="afterDialogCloseDown"
      width="30%">
      <div class="upload-hint"
        style="text-align: left">
        <span>
          当前导出
          <span style="color: #4b71eb"> {{ downloadParams.projectName }} </span>本体数据，请选择数据导出的文件格式：
        </span>
      </div>
      <el-form :model="downloadParams"
        ref="downForm">
        <el-form-item prop="type"
          class="dialog-inline"
          :rules="[
            {
              required: true,
              message: '请选择导出文件格式',
              trigger: 'blur',
            },
          ]">
          <el-radio-group v-model="downloadParams.type">
            <el-radio label="xlsx">Excel表格wps格式</el-radio>
            <el-radio label="xls">Excel表格office格式</el-radio>
            <el-radio label="csv">CSV文件格式</el-radio>
            <el-radio label="json">JSON文件格式</el-radio>
            <el-radio label="rdf">RDF文件格式</el-radio>
            <el-radio label="owl">OWL文件格式</el-radio>
            <!-- <el-radio :label="9">备选项</el-radio> -->
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button @click="afterDialogCloseDown">取 消</el-button>
        <el-button type="primary"
          @click="submitDownloasForm">确 定</el-button>
      </div>
    </el-dialog>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'MapManagement',
  components: {},
  data: () => {
    return {
      downFormVisible: false,
      downloadParams: {
        downLoadStyle: '',
        projectName: '',
        projectId: '',
        type: ''
      },
      dialogVisible: false, // 弹框的开关
      title: '创建图谱', // 弹框名称
      mapForm: {
        name: '',
        descri: '',
        reality: ''
      },
      metaData: {
        searchVal: '', // 图谱名称
        status: '2', // 状态
        page: 1, // 页码
        pageSize: 10 // 每页条数
      },
      entity: [], // 本体
      tableList: [], // 事件素材列表
      total: 0, // 数据总条数
      loading: false,
      graphId: '', // 编辑时选中的图谱名称
      isSelectOrigin: false, // 编辑是是否选择本体
      uploadDialog: false,
      fileForm: {
        name: '武器装备图谱',
        fileName: ''
      },
      uploadRules: {
        fileName: [
          {
            required: true,
            message: '请选择本体文件',
            trigger: ['change', 'blur']
          }
        ]
      },
      itemId: ''
    }
  },
  computed: {},
  created() {
    this.getMapList()
    this.getEntity()
  },
  methods: {
    doloadTemplate() {
      this.$confirm('请选择模板下载类型?', '提示', {
        confirmButtonText: 'JSON',
        cancelButtonText: 'XLS',
        distinguishCancelAndClose: true,
        type: 'info'
      })
        .then(() => {
          // window.open(this.$api.knowledgeMap.getEntityFileTempJson);
          this.$axios({
            methods: 'get',
            url: this.$api.knowledgeMap.graphDownloadTemplate,
            responseType: 'blob',
            params: {
              type: 'json'
            }
          }).then(res => {
            let fileName
            if (res.headers['content-disposition']) {
              const name = res.headers['content-disposition']
              const match = name.match(/filename="?([^";]*)"?/)
              fileName = match[1]
            }
            let url = window.URL.createObjectURL(new Blob([res.data]))
            var a = document.createElement('a')
            a.style.display = 'none'
            a.href = url
            a.download = '知识图谱导入模板.zip'
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
            window.URL.revokeObjectURL(url)
          })
        })
        .catch(action => {
          if (action == 'cancel') {
            this.$axios({
              methods: 'get',
              url: this.$api.knowledgeMap.graphDownloadTemplate,
              responseType: 'blob',
              params: {
                type: 'xls'
              }
            }).then(res => {
              let fileName
              if (res.headers['content-disposition']) {
                const name = res.headers['content-disposition']
                const match = name.match(/filename="?([^";]*)"?/)
                fileName = match[1]
              }
              let url = window.URL.createObjectURL(new Blob([res.data]))
              var a = document.createElement('a')
              a.style.display = 'none'
              a.href = url
              a.download = '知识图谱导入模板.zip'
              document.body.appendChild(a)
              a.click()
              document.body.removeChild(a)
              window.URL.revokeObjectURL(url)
            })
          }
        })
    },
    submitDownloasForm() {
      this.$refs.downForm.validate(valid => {
        if (valid) {
          this.$axios({
            url: `${this.$api.knowledgeMap.exportEntity}?projectId=${this.downloadParams.projectId}&type=${this.downloadParams.type}`,
            method: 'get',
            responseType: 'blob'
          })
            .then(res => {
              let url = window.URL.createObjectURL(new Blob([res.data]), {
                type: 'charset=utf-8'
              })
              var a = document.createElement('a')
              a.style.display = 'none'
              a.href = url
              a.download = `${this.downloadParams.projectName}实体导出数据.zip`
              document.body.appendChild(a)
              a.click()
              document.body.removeChild(a)
              window.URL.revokeObjectURL(url)
              this.downFormVisible = false
            })
            .catch(err => {
              console.error(err)
            })
        } else {
          return false
        }
      })
    },
    afterDialogCloseDown() {
      this.downloadParams = {
        projectId: '',
        projectName: '',
        downLoadStyle: ''
      }
      this.downFormVisible = false
    },
    downModel(row) {
      this.downFormVisible = true
      this.downloadParams.projectId = row.projectId
      this.downloadParams.projectName = row.projectName
    },
    // 删除
    handleDelect(row) {
      let params = {
        projectId: row.projectId
      }
      this.$confirm(`确定删除此图谱？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .post(this.$api.knowledgeMap.deleteGraph, params)
            .then(res => {
              if (res.data.code === 200) {
                this.$message.success(res.data.message || '操作成功')
                this.getMapList()
              } else {
                this.$message.warning(res.data.message)
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    getMapList() {
      this.loading = true
      let params = {
        graphName: this.metaData.searchVal,
        graphStatus: this.metaData.status,
        pageNum: this.metaData.page,
        pageSize: this.metaData.pageSize
      }
      this.$axios
        .post(this.$api.knowledgeMap.getMapList, params)
        .then(res => {
          const { data, message, code } = res.data
          if (code === 200) {
            this.tableList = data.list
            this.total = data.total
          } else {
            this.$message.warning(message)
          }
          this.loading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    getEntity() {
      let params = {}
      this.$axios
        .post(this.$api.knowledgeMap.getEntity, params)
        .then(res => {
          const { data, message, code } = res.data
          if (code === 200) {
            this.entity = data
          } else {
            this.$message.warning(message)
          }
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    // 初始化图谱提交表单
    initMapForm() {
      this.mapForm = {
        name: '',
        descri: '',
        reality: ''
      }
    },
    addGraph() {
      let params = {
        graphName: this.mapForm.name,
        description: this.mapForm.descri,
        noumenonId: this.mapForm.reality
      }
      this.$axios.post(this.$api.knowledgeMap.addGraph, params).then(res => {
        const { data, message, code } = res.data
        if (code === 200) {
          this.getMapList()
          this.mapForm.name = ''
          this.mapForm.descri = ''
          this.mapForm.reality = ''
          this.dialogVisible = false
        } else {
          this.$message.warning(message)
        }
      })
    },
    editGraph() {
      let params = {
        graphId: this.graphId,
        graphName: this.mapForm.name,
        description: this.mapForm.descri,
        noumenonId: this.mapForm.reality
      }
      this.$axios
        .post(this.$api.knowledgeMap.editGraph, params)
        .then(res => {
          const { data, message, code } = res.data
          if (code === 200) {
            this.$message.success('编辑成功')
            this.dialogVisible = false
            this.getMapList()
            this.mapForm.name = ''
            this.mapForm.descri = ''
            this.mapForm.reality = ''
            return
          }
          this.$message.warning(message)
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    // 设置图谱状态
    setStatus(id, status) {
      let params = {
        graphId: id,
        graphStatus: status == '0' ? '1' : '0' // 1是禁用，， 0是启用
      }
      this.$axios
        .post(this.$api.knowledgeMap.setStatus, params)
        .then(res => {
          const { data, message, code } = res.data
          if (code === 200) {
            this.$message.success(`${status === '0' ? '禁用' : '启用'}成功`)
            this.getMapList()
            return
          }
          this.$message.warning(message)
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    // 查询
    searchMap() {
      this.getMapList()
    },
    // 跳转详情页
    goDetail(type, id) {
      console.log('fdfd', type, id)

      if (id.entityNum != 0 || id.relationNum != 0) {
        this.isSelectOrigin = true
      }
      this.graphId = id.projectId
      this.mapForm.name = id.projectName
      this.mapForm.descri = id.projectDescription
      this.mapForm.reality = id.ontologyAllId
      if (type === 'edit') {
        this.dialogVisible = true
        this.title = '编辑图谱'
        return
      }
      if (type === 'manage') {
        this.$router.push({
          path: '/manage/viewManagement',
          query: {
            projectId: id.projectId
          }
        })
      }
    },
    // 修改状态
    async changeStatus(item) {
      this.$confirm(
        `是否${item.projectState == '0' ? '禁用' : '启用'}当前图谱`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          await this.setStatus(item.projectId, item.projectState)
        })
        .catch(() => {
          this.$message.info('已取消')
        })
    },
    uploadFile(e) {
      // console.log("wwwwwwww", e);
      this.fileForm.name = e.projectName
      this.itemId = e.projectId
      this.uploadDialog = true
    },
    // loadFileTemplate() {
    //   this.$axios
    //     .get(this.$api.knowledgeMap.getEntityFileTempFile)
    //     .then((res) => {
    //       let data = res.data.data;
    //       console.log("ressss", data);
    //       var iframe = document.createElement("iframe");
    //       iframe.style.display = "none";
    //       iframe.src = data;
    //       document.body.appendChild(iframe);
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    // 触发选择文件
    handleSelectFile() {
      this.$refs.sourceFileRef.click()
    },
    // 准备
    readySelectFile() {
      const selectFile = this.$refs.sourceFileRef.files[0]
      if (selectFile) {
        // if (this.validSelectFile(selectFile)) {
        this.fileForm.fileName = selectFile.name
        this.uploadFileData = selectFile
        // }
      }
    },
    // 校验文件
    validSelectFile(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['rdf', 'xls', 'xlsx', 'csv', 'json', 'owl'] // ".xls,.xlsx,.csv,.json,.rdf,.owl"
      if (whiteList.indexOf(fileSuffix.toLowerCase()) === -1) {
        this.$message.error('上传文件只能是 rdf、xls、xlsx、csv、json、owl格式')
        return false
      }
      return true
    },
    uploadFun() {
      this.$refs.uploadForm.validate(valid => {
        if (valid) {
          const fileLoading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.2)'
            // customClass: 'custom-loading'
          })
          let params = {
            file: this.uploadFileData,
            projectId: this.itemId
          }
          this.$fileHttp
            .uploadFile(
              this.$api.knowledgeMap.importKgEntityRelationById,
              params
            )
            .then(res => {
              let code = res.data.code
              let message = res.data.msg
              if (code !== 200) {
                this.$message.warning(message)
                this.uploadDialog = false
                fileLoading.close()
                return
              }
              this.$message.success(message)
              this.uploadDialog = false
              fileLoading.close()
              this.getMapList()
            })
            .catch(() => {
              fileLoading.close()
            })
        } else {
          return false
        }
      })
    },
    afterDialogClose() {
      this.uploadDialog = false
      this.uploadFileData = null
      this.$refs.uploadForm && this.$refs.uploadForm.resetFields()
      console.log('afq', this.uploadFileData)
    },
    openDia() {
      this.dialogVisible = true
      this.title = '创建图谱'
    },
    handleCurrentChange(val) {
      this.metaData.page = val
      this.getMapList()
    },
    handleSizeChange(val) {
      this.metaData.pageSize = val
      this.getMapList()
    },
    cancel() {
      this.dialogVisible = false
      this.isSelectOrigin = false
      this.initMapForm()
    },
    save() {
      this.$refs.form.validate(val => {
        if (val) {
          if (this.title == '创建图谱') {
            this.addGraph()
          } else {
            this.editGraph()
          }
          this.isSelectOrigin = false
        }
      })
    },
    handleClose() {
      this.isSelectOrigin = false
      this.dialogVisible = false
    },
    goOntology() {
      this.$router.push({
        path: '/ontologyModel/ontologyManagement'
      })
    }
  },
  watch: {}
}
</script>
<style lang="scss" scoped>
.server-main {
  position: relative;
  height: 100%;

  // padding-bottom: 16px;
  .search-form {
    height: 72px;
    padding: 0 32px;
    background: #ffffff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .el-form-item {
      margin-bottom: 0;
    }
  }

  .form-input {
    margin-right: 32px;

    /deep/ .el-input {
      width: 240px;
    }

    /deep/ .el-input__inner {
      height: 32px;
    }
  }

  .search-select {
    margin-right: 32px;

    /deep/ .el-input__inner {
      width: 240px;
      height: 32px;
    }
  }

  .server-table {
    min-height: calc(100% - 136px);
    padding: 16px 32px 20px;
    background: #fff;

    .table-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .table-title-text {
        font-size: 16px;
        border-left: 5px solid #4b71eb;
        padding-left: 10px;
        line-height: 16px;
      }

      margin-bottom: 10px;
    }

    .el-table {
      .operation {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }

    /deep/ .cell {
      text-align: center;
    }

    .handle-button {
      margin-right: 10px;
    }
  }

  .file_div {
    display: flex;

    .input {
      margin-right: 10px;
    }
  }

  .el-upload__text {
    line-height: 24px;
  }
}

.dialog-inline {
  /deep/ .el-radio {
    margin: 10px;
    width: 150px;
  }
  // /deep/ .el-textarea__inner {
  //   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
  //     Microsoft YaHei, Arial, sans-serif;
  // }

  // button.el-button {
  //   background-color: $--color-primary !important;
  //   color: #fff !important;
  //   line-height: 1.2;
  // }
}

.pagination {
  position: relative;
  margin-top: 28px;
  height: 40px;

  .table-pagination {
    position: absolute;
    right: 0;

    /deep/ .el-input__inner {
      height: 22px;
    }
  }
}

.little-circle-blue {
  width: 6px;
  height: 6px;
  background: #55c898;
  display: inline-block;
  border-radius: 6px;
  line-height: 6px;
  margin-right: 6px;
  margin-bottom: 2px;
}

.little-circle-red {
  width: 6px;
  height: 6px;
  background: #ee5564;
  display: inline-block;
  border-radius: 6px;
  line-height: 6px;
  margin-right: 6px;
  margin-bottom: 2px;
}

.map-dialog {
  .form-select {
    width: 100%;
  }

  .form-link {
    line-height: initial;
  }

  /deep/ .el-dialog__header {
    border-bottom: 2px solid #e5e6e9;
  }

  /deep/ .el-dialog__body {
    padding-bottom: 0;
  }
}

.common-dialog {
  /deep/ .el-dialog {
    border-radius: 4px;
  }

  /deep/ .el-dialog__header {
    padding: 20px;
    padding-left: 32px;
  }

  /deep/ .el-dialog__title {
    font-size: 18px;
    font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
    color: #333333;
  }

  /deep/ .el-dialog__body {
    padding: 42px 60px 0 60px;
  }

  /deep/ .el-input__inner {
    height: 32px;
  }

  /deep/ .el-form-item__label {
    color: #333333;
  }

  /deep/ .el-button {
    width: 68px;
    height: 32px;
    padding: 6px;
    margin-left: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 0;
  }
}

// .el-loading-mask.is-fullscreen .el-loading-spinner{
//   color: red;
//   font-size: 24px;
// }
</style>
